<template>
  <div class="record-view">
    <!-- <div class="progress-front" :style="{ width: recoderProgress + '%' }"></div> -->
    <div class="progress-bg"></div>
    <div class="record-view-container">
      <div class="inner-container">
        <img alt="" src="../../../assets/images/record_logo.webp" class="record_logo" />
        <div class="recording">
          <div class="recording-text">录音中...</div>
          <div class="recording-time">{{ showTime.current }}</div>
        </div>
      </div>
      <div class="inner-container">
        <img
          src="../../../assets/images/record_send_blue_bg.webp"
          class="record-action"
          alt=""
          @click="sendRecorder"
        />
        <!-- <img src="../../../assets/images/record_play_blue_bg.webp" class="record-action" alt="" /> -->
        <img
          src="../../../assets/images/record_cancel_red_bg.webp"
          class="record-action"
          alt=""
          @click="cancelRecorder"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="RecordView">
import { computed, onMounted, ref } from 'vue';
import useAudioRecorder from '../../../hooks/useAudioRecorder';
const recorder = useAudioRecorder();

const emit = defineEmits(['startRecording', 'recodError', 'sendReorder', 'cancelRecorder']);

const isRecording = ref(false);
let recorderInterval: any = null;
const totalDuration = 60;
const currentDuration = ref(0);

let recordResult: any = null;
onMounted(() => {
  recorder
    .startRecord()
    .then(() => {
      recorderInterval = setInterval(() => {
        currentDuration.value++;
        // if (currentDuration.value < totalDuration) {
        //   currentDuration.value++;
        // }
        // if (currentDuration.value >= totalDuration && recorder.getRecordTime() >= totalDuration) {
        //   isRecording.value = false;
        //   recordResult = recorder.getRecordFile();
        //   clearInterval(recorderInterval);
        //   recorderInterval = null;
        //   recorder.destroyRecord();
        // }
      }, 1000);
      console.log('开始录音');
      isRecording.value = true;
      emit('startRecording');
    })
    .catch((e) => {
      isRecording.value = false;
      currentDuration.value = 0;
      emit('recodError');
      recorder.destroyRecord();
      console.log(e);
    });
});

//时间转换为 格式化字符串
const showTime = computed(() => {
  let current = durationToShowTime(currentDuration.value);
  let total = durationToShowTime(Math.max(totalDuration - currentDuration.value, 0));
  return {
    current,
    total
  };
});

function durationToShowTime(duration: number) {
  // 确保秒数为整数
  let seconds = Math.floor(duration);
  var minutes = Math.floor(seconds / 60);
  var remainingSeconds = seconds % 60;
  var formattedMinutes = minutes.toString().padStart(2, '0');
  var formattedSeconds = remainingSeconds.toString().padStart(2, '0');
  var formattedTime = `${formattedMinutes}:${formattedSeconds}`;
  return formattedTime;
}
//发送录音
function sendRecorder() {
  if (isRecording.value) {
    clearInterval(recorderInterval);
    recorderInterval = null;
    recordResult = recorder.getRecordFile();
    emit('sendReorder', recordResult);
  } else if (recordResult) {
    emit('sendReorder', recordResult);
  } else {
    console.log('录音未开始');
  }
}

//取消录音
function cancelRecorder() {
  isRecording.value = false;
  emit('recodError');
  recorder.destroyRecord();
}
// 录制进度
// const recoderProgress = computed(() => {
//   return Math.floor((currentDuration.value * 100) / totalDuration);
// });
</script>

<style scoped lang="scss">
.record-view {
  width: 100%;
  height: 52px;
  display: flex;
  flex-direction: row;
  position: relative;
  .progress-front {
    height: 100%;
    width: 50%;
    background-color: #c2d7ff;
  }
  .progress-bg {
    height: 100%;
    flex: 1;
    background-color: #eaf1ff;
  }

  &-container {
    width: 100%;
    height: 52px;
    display: flex;
    box-sizing: border-box;
    padding: 0 16px;
    top: 0;
    left: 0;
    flex-direction: row;
    position: absolute;
    z-index: 10;
    justify-content: space-between;

    .inner-container {
      height: 52px;
      display: flex;
      align-items: center;
      .record_logo {
        width: 36px;
        height: 36px;
      }

      .recording {
        margin-left: 12px;
        height: 36px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .recording-text {
          color: #333333;
          font-weight: 500;
          font-size: 14px;
          line-height: 20px;
        }

        .recording-time {
          height: 17px;
          color: #333333;
          font-family: PingFang SC;
          font-size: 12px;
          line-height: 17px;
        }
      }

      .record-action {
        width: 24px;
        height: 24px;
        margin-left: 12px;
      }
    }
  }
}
</style>
